<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormRules } from "element-plus";
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
});
/**
 * 表单值
 */
const form = ref({
  ...props.item
});
const rules = reactive<FormRules>({
  weight: [
    {
      required: true,
      message: "请输入设备权重"
    }
  ]
});
/**
 * ref
 */
const ruleFormRef = ref();
function getRef() {
  return ruleFormRef.value;
}
function getFormData() {
  return form.value;
}
/**
 * 弹窗 表单所需的ref
 */
defineExpose({
  getRef,
  getFormData
});
</script>

<template>
  <div>
    <el-form
      ref="ruleFormRef"
      label-width="120px"
      label-position="left"
      :model="form"
      :rules="rules"
      class="search-form"
    >
      <el-form-item label="设备权重: " prop="weight">
        <el-input-number
          v-model.number="form.weight"
          :min="0"
          :max="1000"
          placeholder="请输入设备权重"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-input-number) {
  width: 100%;
}
</style>
